<template>
  <el-dialog v-model="show" title="添加用户" @close="emit('hide')">
    <el-form ref="formRef" :model="form" :rules="rules">
      <el-form-item prop="username" label="账号" label-width="100px">
        <el-input v-model="form.username" autocomplete="off" />
      </el-form-item>
      <el-form-item prop="nickName" label="姓名" label-width="100px">
        <el-input v-model="form.nickName" autocomplete="off" />
      </el-form-item>
      <el-form-item prop="email" label="邮箱" label-width="100px">
        <el-input v-model="form.email" autocomplete="off" />
      </el-form-item>
      <el-form-item prop="password" label="密码" label-width="100px">
        <el-input
          type="password"
          v-model="form.password"
          :disabled="data"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item prop="note" label="备注" label-width="100px">
        <el-input v-model="form.note" autocomplete="off" />
      </el-form-item>
      <el-form-item label="是否启用" label-width="100px">
        <el-radio-group v-model="form.status" class="ml-4">
          <el-radio :label="1" size="large">是</el-radio>
          <el-radio :label="0" size="large">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="emit('hide')">取消</el-button>
        <el-button type="primary" @click="sureFn"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox, FormInstance } from "element-plus";
import { reactive, ref, watch } from "vue";
import { user } from "@/api";

// 表单内容
const form = reactive<IRegisterUserParams>({
  username: "",
  nickName: "",
  email: "",
  password: "",
  note: "",
  status: 0,
});
const rules = {
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 6, max: 20, message: "用名要在6~20个字符之间", trigger: "blur" },
  ],
  email: [
    { required: true, message: "请输入邮箱", trigger: "blur" },
    {
      type: "email",
      message: "请填空正确的邮箱地址",
      trigger: ["blur", "change"],
    },
  ],
  nickName: [
    { required: true, message: "请输入姓名", trigger: "blur" },
    { message: "请输入姓名", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { message: "请输入密码", trigger: "blur" },
  ],
};

const emit = defineEmits(["hide", "refresh"]);
// const show = ref(true);
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  data: {
    type: Number,
    default: 0,
  },
});

const formRef = ref<FormInstance>();

const sureFn = () => {
  formRef.value?.validate((valid: boolean) => {
    if (valid) {
      ElMessageBox.confirm("确定要添加该用户吗？", "确定添加", {
        type: "warning",
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        if (props.data !== 0) {
          user.updateUserInforApi(form as IUserModel).then((res) => {
            if (res.code === 200) {
              // 提示用户
              ElMessage.success("修改用户成功");
              // 关闭 dialog
              emit("hide");
              // 刷新表格
              emit("refresh");
            }
          });
        } else {
          user.registerUserApi(form).then((res) => {
            if (res.code === 200) {
              ElMessage.success("添加用户成功");
              emit("hide");
              // 刷新
              emit("refresh");
              // 在关闭 dialog 后， 记得清空  -- 自己实现
            } else {
              ElMessage.error(res.message + ",请重试");
            }
          });
        }
      });
    } else {
      return false;
    }
  });
};

// 什么时候发请求向服务器获取我们要的数据 -
// 当我们点击编辑，会修改从父组件传递进来的一个 data , 其实就是id
// 当该id不为0，就是点的编辑
// watch 来监听 id(props.data), 当不为0 ，才向服务器发请求
watch(
  () => props.data,
  () => {
    if (props.data === 0) {
      formRef.value?.resetFields();
      return;
    } else {
      // 否则就是点击的编辑，就可以向服务器发请求
      user.getUserInfoApi(props.data).then((res) => {
        if (res.code === 200) {
          Object.assign(form, res.data); // api 没见过，就去看文档， Object.assign() ---> MDN
        }
      });
    }
  }
);
</script>

<style scoped></style>
